<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/layui1.css">
    <link rel="stylesheet" href="../css/goodssyshome.css">
    <script src="../js/layui1.js"></script>
    <script src="../js//tool.js"></script>
    <style>
        #del {
            background-color: red;
        }
    </style>

</head>

<body>
    <header>
        <div class="exitbox">
            <span class="userInfo">修改个人信息</span>
            <a class="update" href="./editpassword.html">修改密码</a>
            <span class="nickname">用户名</span>
            <span class="exit">退出</span>
        </div>
    </header>
    <div class="container">
        <form class="register-box">
            <div class="form-head">
                <div class="rig">×</div>
                <p class="title-p">修改个人信息</p>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">年龄:</label>
                <input type="text" class="form-control" id="age" placeholder="请输入age">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">性别:</label>
                <!-- <input type="text" class="form-control" id="gender"> -->
                <select name="" id="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">昵称:</label>
                <input type="text" class="form-control" id="nickname">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">头像:</label>
                <input type="file" name="header">
                <img src="" alt="" class="header-img">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">修改</button>
            </div>
        </form>

    </div>

    <!-- 侧边栏 -->

    <div class="big">
        <ul class="layui-nav layui-nav-tree" id="ceb" ay-filter="test">
            <li class="layui-nav-item ">
                <a href="./goodssyshome.html">商品管理</a>
            </li>
            <li class="layui-nav-item it1">
                <a href="">用户管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="./bannersyshome.html">banner管理</a>
            </li>
        </ul>

        <!-- 主体 -->

        <div class="content">
            <p>用户管理</p>
            <div class="search">
                <input type="text" name="" style="width: 300px;" placeholder="请输入商品名称" autocomplete="off"
                    class="layui-input layui-input2">
            </div>
            <button type="button" class="layui-btn1">搜索</button>
            <button type="button" class="layui-btn">新建</button>



            <div class="box">
                <form class="layui-form1" action="">
                    <div class="txt">
                        用户编辑
                        <button class="clr">×</button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="goodname" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input wid">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-inline">
                            <input type="file" name="good" class="my_upload" placeholder="价格" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户性别</label>
                        <div class="layui-input-block">
                            <input type="text" name="goodname" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input wid">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="goodname" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input wid">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-block">
                            <input type="text" name="goodname" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input wid">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea class="wid" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>






            <table id="demo" lay-filter="test"></table>


        </div>

    </div>
    <script>
        let imgupload = document.querySelector('.my_upload')
        let formele = document.querySelector('.layui-form')
        let btn = document.querySelector('.layui-btn')
        let box = document.querySelector('.box')
        let clr = document.querySelector('.clr')
        let search = document.querySelector('.layui-btn1')
        let exit = document.querySelector('.exitbox>.exit')
        let userInfo = document.querySelector('.userInfo')
        let age = document.querySelector('#age')
        let gender = document.querySelector('#gender')
        let nickname = document.querySelector('#nickname')
        let container = document.querySelector('.container')
        let exitbox = document.querySelector('.exitbox')
        let rbox = document.querySelector('.register-box')
        let bt = document.querySelector('.btn')
        let rig = document.querySelector('.rig')
        let imgurl = null
        let headerImg = ''
        let formele1 = document.querySelector('.register-box')
        let header = document.querySelector('.header-img')
        let fileele = document.querySelector('.form-group>input[type=file]')
        let nick = document.querySelector('.nickname')

        //创建用户
        let headerImg1 = ''
        let formele2 = document.querySelector('.layui-form1')
        let header1 = document.querySelector('.goodimg')
        let fileele1 = document.querySelector('.my_upload')
        let searV = document.querySelector('.layui-input2')

        // 注销登录  
        exit.onclick = async () => {
            let params = {
                url: '/users/logout',
                query: {
                    id: cookie.getItem('userId')
                }
            }
            let res = await axios.get(params)
            console.log(res);
            if (res.code == 1) {
                cookie.clear()
                alert('以注销登录！')
                location.href = './login.html';
            } else {
                alert(res.message)
            }
        }

        rig.onclick = () => {
            container.style.display = 'none'
            rbox.style.display = 'none'
        }

        //显示修改信息时的头像
        handleChange()
        function handleChange() {
            fileele.onchange = async () => {
                // console.log(123)

                let fm = new FormData(formele1)

                let res = await axios.upload({ url: '/common/upload', query: fm })
                console.log(res)
                if (res.code == 1) {
                    header.src = 'http://localhost:8888/' + res.path
                    headerImg = '/' + res.path
                }

            }
        }

        //获取信息
        async function initVlaue() {
            // 判断token 有没有 
            if (cookie.getItem('token')) {
                let params = {
                    url: '/users/info',
                    query: {
                        id: cookie.getItem('userId')
                    }
                }

                let res = await axios.get(params)
                console.log(res);
                if (res.code == 1) {
                    nick.innerHTML = res.info.nickname
                }

            }
        }

        //显示页面
        userInfo.onclick = async () => {
            // 回显数据  

            let params = {
                url: '/users/info',
                query: {
                    id: cookie.getItem('userId')
                }
            }

            let res = await axios.get(params)
            console.log('>>>>>>>>>>', res)

            if (res.code == 1) {
                age.value = res.info.age
                gender.value = res.info.gender
                nickname.value = res.info.nickname
                // 显示页面
                container.style.display = 'block'
                rbox.style.display = 'block'
            }

        }

        //修改信息
        bt.onclick = async () => {
            // 验证数据格式 
            // 准备请求的参数  
            let params = {
                url: '/users/update',
                query: {
                    id: cookie.getItem('userId'),
                    age: age.value,
                    gender: gender.value,
                    nickname: nickname.value,
                    headerImg: this.fileele.value
                }
            }
            let res = await axios.post(params)
            console.log(res)
            if (res.code == 1) {
                alert(res.message)
                initVlaue()
                container.style.display = 'none'

            }
        }




        // _________________________________________

        btn.onclick = () => {
            box.style.display = 'block'
        }

        clr.onclick = () => {
            box.style.display = 'none'
        }

        imgupload.onchange = () => {
            let fm = new FormData(formele1)

            axios.upload({ url: '/common/goodupload', query: fm }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    imgurl = '/' + res.path
                }
            })
        }
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', async function (data) {
                // layer.msg(JSON.stringify(data.field));
                let obj = JSON.parse(JSON.stringify(data.field))
                delete obj.good
                obj.imgurl = imgurl

                if (!obj.imgurl) {
                    return alert('图片没传')
                }

                let params = {
                    url: "/good/add",
                    query: obj
                }
                let res = await axios.post(params)
                console.log(res)
                return false;
            });
        });

        //用户创建时的头像
        handleChange1()
        function handleChange1() {
            fileele1.onchange = async () => {
                // console.log(123)

                let fm = new FormData(formele2)

                let res = await axios.upload({ url: '/common/upload', query: fm })
                console.log(res)
                if (res.code == 1) {
                    header1.src = 'http://localhost:8888/' + res.path
                    headerImg1 = '/' + res.path
                }

            }
        }

        //点击查找
        search.onclick = () => {
            initvalue()
        }

        initvalue()
        async function initvalue() {
            let params = {
                url: "/users/list",
                query: {
                    search: searV.value,
                    page: 1,
                    pagesize: 100
                }
            }
            let res = await axios.get(params)
            console.log(res)
            //数据回来后，开始渲染
            showList()
            function showList() {
                if (res.code == 1) {
                    layui.use('table', function () {
                        var table = layui.table;

                        //第一个实例
                        table.render({
                            elem: '#demo', height: 548, data: res.arr

                            , page: true //开启分页
                            , cols: [[ //表头
                                { field: '_id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                                // { field: 'imgurl', title: '商品图片', width: 80, sort: true, },
                                { field: 'username', title: '姓名', width: 160, sort: true, },
                                { field: 'gender', title: '性别', width: 160, sort: true, },
                                { field: 'headerImg', title: '头像', width: 160, sort: true, templet: function (d) { return `<img src='http://localhost:8888${d.headerImg}' width="30px">` } },
                                { field: 'phone', title: '电话号码', width: 160, sort: true, },
                                { field: 'createTime', title: '创建时间', width: 160, sort: true, },
                                { field: 'opeartion', title: '操作', width: 200, sort: true, toolbar: '#toolEventDemo' },

                            ]]
                        });

                        //工具事件
                        table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
                            var data = obj.data; //获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                            if (layEvent === 'detail') { //查看
                                console.log(data);
                                // 在此处输入 layer 的任意代码
                                layer.open({
                                    type: 1, // page 层类型
                                    area: ['550px', '450px'],
                                    title: '查看',
                                    shade: 0.6, // 遮罩透明度
                                    shadeClose: false, // 点击遮罩区域，关闭弹层
                                    maxmin: true, // 允许全屏最小化
                                    anim: 4, // 0-6 的动画形式，-1 不开启
                                    content: `<div style="padding: 32px;" class="tbox">
                                                <table>
                                                    <tr>
                                                        <td>姓名：</td>
                                                        <td>${data.username}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>性别：</td>
                                                        <td>${data.gender}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>电话：</td>
                                                        <td>${data.phone}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>昵称：</td>
                                                        <td>${data.nickname}</td>
                                                    </tr>
                                                    
                                                    <img src="${data.headerImg}">
                                                </table>
                                            </div>`
                                });

                            } else if (layEvent === 'del') { //删除
                                layer.confirm('确定删除吗？', function (index) {
                                    obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                                    layer.close(index);
                                });
                            } else if (layEvent === 'edit') { //编辑

                                console.log(data);
                                // 同步更新缓存对应的值
                                // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
                                obj.update({
                                    goodname: '123',
                                    title: 'abc'
                                });
                                layer.open({
                                    type: 1, // page 层类型
                                    area: ['550px', '450px'],
                                    title: '编辑',
                                    shade: 0.6, // 遮罩透明度
                                    shadeClose: false, // 点击遮罩区域，关闭弹层
                                    maxmin: true, // 允许全屏最小化
                                    anim: 5, // 0-6 的动画形式，-1 不开启
                                    content: `<div style="padding: 32px;" class="tbox">
                                                <table>
                                                    <tr>
                                                        <td>名称：</td>
                                                        <td><input type="text"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>价格：</td>
                                                        <td><input type="text"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>库存：</td>
                                                        <td><input type="text"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>创建时间：</td>
                                                        <td><input type="text"></td>
                                                    </tr>
                                                    <input type="file">
                                                    <img src="">
                                                </table>
                                            </div>`
                                });

                            }
                        });

                    });
                }
            }
        }
    </script>
    <script type="text/html" id="toolEventDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del" id="del">删除</a>
    </script>

</body>

</html>